<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/22
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<div class="layui-form layui-form-pone">
    <div class="layui-form-item" >
        <label class="layui-form-label" style="width: 50px">
            用户名
        </label>
        <div class="layui-input-inline" style="width: 120px">
            <input type="text" class="layui-input" id="username" autocomplete="off">
        </div>

        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">
                姓名
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <input type="text" class="layui-input" id="realname" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">
                角色
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <select id="role">
                    <option value="">角色</option>
                    <option value="1">管理员</option>
                    <option value="2">业务员</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 40px">
                状态
            </label>
            <div class="layui-input-inline" style="width: 120px">
                <select id="deleted">
                    <option value="">状态</option>
                    <option value="1">在职</option>
                    <option value="2">离职</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" id="searchBtn" type="button">查询</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>

    </div>
</div>
</form>
<hr>
<table id="dataTable" lay-filter="dataTableFilter"></table>
<%--头工具栏--%>
<script type="text/html" id="headerBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm"  lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            添加员工
        </button>
    </div>
</script>
<%--行工具栏--%>
<script type="text/html" id="rowBtns" >
    <div class="layui-btn-group" >
        <button class="layui-btn layui-btn-sm layui-btn-warm"  lay-event="restPwd">
            <i class="layui-icon layui-icon-refresh-3" ></i>
            重置密码
        </button>
        {{# if(d.deleted == 1){ }}
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            离职
        </button>
        {{# } }}
    </div>
</script>
<script type="text/html" id="editTpl">
<form class="layui-form layui-form-pane" lay-filter="editFormFilter" style="margin-left:20px;margin-top: 20px">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="realname" class="layui-input" autocomplete="off" placeholder="姓名" lay-verify="required" lay-reqText="姓名不能为空">
        </div>
    </div>
        <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="username" class="layui-input" autocomplete="off" placeholder="用户名" lay-verify="required" lay-reqText="用户名不能为空">
        </div>
    </div>
        <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" name="password"  value="123456" readonly  class="layui-input" >
        </div>
    </div>
 <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline" style="width: 220px">
            <input type="radio" name="role" title="业务员" value="2" checked   >
            <input type="radio" name="role" title="管理员" value="1"    >
        </div>
    </div>
    <button id="subBtn" lay-submit lay-filter="subBtnFilter" style="display: none" type="button"></button>
</form>
</script>
<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery', 'table'], function () {
        let form = layui.form
        let layer = layui.layer
        let $ = layui.jquery
        let table = layui.table;
        //项目根目录
        let cxt = "${pageContext.request.contextPath}";

        //全局设置
        $.ajaxSetup({
            dataFilter:function (rs) {
                //讲返回结果转化为JSON 数据拦截
                let data = JSON.parse(rs);
                //响应码 不是200 是需要登录时 则需要跳转登录
                if (data.code == 400000001){
                    setTimeout(function () {
                        window.parent.location.href = "index.jsp";
                    },3000)

                    return rs;
                }
                return rs;
            }
        });
        //渲染表格
        let tabOpt = {
            id: "dataTableId",
            elem: "#dataTable",
            url: cxt + "/user.do?service=page",
            page: true,
            toolbar: "#headerBtns",
            cols: [[
                {type: "checkbox", fixed: "left"},
                {title: "用户名", field: "username"  },
                {title: "姓名", field: "realname"},
                {
                    title: "角色",   field: "role", templet: function (d) {
                        let role = d.role;
                        if (role == 1) {
                            return "<b style='color:mediumvioletred'>管理员</b>";
                        } else if (role == 2) {
                            return "<b style='color:lightseagreen'>业务员</b>";
                        }
                    }
                },
                {
                    title: "状态", field: "deleted", templet: function (d) {
                        let deleted = d.deleted;
                        if (deleted == 1) {
                            return "<b style='color:lightseagreen'>在职</b>";
                        } else if (deleted == 2) {
                            return "<b style='color:lightslategrey'>离职</b>";
                        }
                    }
                },
                {
                    title: "图像", field: "img", event: "showImg", templet: function (d) {
                        return "<button class='layui-btn layui-btn-xs'>查看</button>";
                    }},
                {title: "创建时间", field: "createTime"},
                {title: "离职时间", field: "deletedTime"},
                {title: "操作", toolbar: "#rowBtns",minWidth:"200px",fixed: "right"},

            ]],
            parseData: function (rs) {
                if(rs.code==400000001){
                    window.parent.location.href="index.jsp"
                }
                return {
                    code: rs.code,
                    msg: rs.msg,
                    count: rs.data.count,
                    data: rs.data.data
                }
            },
            response: {
                statusCode: 200
            }
        };
        let tabIns = table.render(tabOpt);

        //搜索
        $("#searchBtn").click(function () {
            let username = $("#username").val();
            let realname = $("#realname").val();
            let deleted = $("#deleted").val();
            let role = $("#role").val();
            //表格重载
            tabIns.reload({
                where: {
                    username: username,
                    realname: realname,
                    deleted: deleted,
                    role: role
                }
            });
        });

        //表格行工具栏监听事件
        table.on("tool(dataTableFilter)",function (d) {
                let event = d.event;//获取事件类型
                let rowData = d.data;//获取行数据
                //事件分发
                if(event =="restPwd"){
                    resetPwd(rowData);
                } else if(event =="del"){
                    del(rowData);
                }else  if (event="showImg"){
                    showImg(rowData);
                }
        })
        /**
         *重置密码
         */
        function resetPwd(rowData) {
            if (rowData.deleted==2){
                layer.msg("该员工已是离职状态")
                return false;
            }
            layer.confirm("你确定要重置密码吗？",function (index) {

                let param ={"service":"resetPwd","id":rowData.id};
                $.get(cxt+"/user.do",param,function (rs) {
                    //将业务消息展示
                    layer.msg(rs.msg);
                    if(rs.code!=200){

                        return;
                    }
                    //刷新表格
                    $("#searchBtn").click();

                })

            })
        }
        /**
         *员工离职方法
         */
        function del(rowData) {
            console.log(rowData.deleted);
            //员工数据状态
            if (rowData.deleted==2){
                layer.msg("该员工已是离职状态")
                return false;
            }
            layer.confirm("该员工是否离职？",function (index) {
                let param ={"service":"deleted","id":rowData.id};
                $.get(cxt+"/user.do",param,function (rs) {
                    //将业务消息展示
                    layer.msg(rs.msg);
                    if(rs.code!=200){
                        return;
                    }
                    //刷新表格
                    $("#searchBtn").click();

                })

            })
        }
        /*
        *展示员工头像
        */
        function showImg(rowData){
            if (!rowData.img){
                layer.msg("该员工没有设置头像")
                return false;
            }
            let img= rowData.img;
            let photoOpt ={
                "title":"员工头像",
                "start":0,
                "data":[
                    {
                        "alt":rowData.realname,
                        "src":cxt+"/"+img,
                        "thumb":cxt+"/"+img,
                    }
                ]
            }
            layer.photos({
                photos:photoOpt
                ,anim:5
            })

        }
        //表格头工具栏监听事件
        table.on("toolbar",function (d) {
            let event = d.event;

            if(event == "add"){
                add();
            }
        });
        /**
         *新增员工
         */
        function add() {
            let layerOpt={
                title:"编辑",
                type:1,
                content:$("#editTpl").html(),
                area:['360px','390px'],
                btn:['确认','取消'],
                btnAlign:'c',
                success:function (layero,index) {
                    //渲染表单
                    form.render("radio");
                    //表格的提交监听
                    form.on("submit(subBtnFilter)",function (d) {
                            let formData= d.field;
                            $.post(cxt+"/user.do?service=add",formData,function (rs) {
                                        layer.msg(rs.msg);
                                if (rs.code!=200){
                                    return false;
                                }
                                //关闭弹层
                                layer.close(index);
                                //刷新表格
                                $("#searchBtn").click()
                            })
                    })
                },
                yes:function (index,layero) {
                //手动触发提交按钮 点击
                    $("#subBtn").click()
                }

            };
            layer.open(layerOpt);
        }




    })
</script>
</body>
</html>



















